<template>
    <div class="page-3">
        <PageTitle></PageTitle>

        <WizardSteps :active="3" />

        <section class="card-img" v-if="!showWiFiInfo">
            <img src="@/assets/images/wizard/completed.png" alt="insertcard" draggable="false" />
            <p class="tips-text">
                <span>{{ Tips }}</span>
            </p>
        </section>

        <div class="wifi-layout" v-else>
            <div class="wifi-layout-conent">
                <div class="wifi-img">
                    <img src="@/assets/images/wizard/completed.png" alt="insertcard" draggable="false" />
                </div>
                <section class="wifi-info">
                    <div class="wifi-card">
                        <div class="wifi-type" v-if="!wiFiInfo.hide5G">{{ wiFiInfo.Gby2_4.title }}</div>
                        <div class="wifi-text-content">
                            <div class="wifi-name">{{ $t('netWork.wifiSettings.ssidTextMobile') + ':' }}</div>
                            <div class="wifi-name-content">{{ wiFiInfo.Gby2_4.wifiName }}</div>
                        </div>
                        <div class="wifi-text-content" style="margin-top: 8px">
                            <div class="wifi-pwd">{{ $t('common.password') + ':' }}</div>
                            <div class="wifi-pwd-content">{{ wiFiInfo.Gby2_4.password }}</div>
                        </div>
                    </div>
                    <div class="wifi-card" v-if="!wiFiInfo.hide5G">
                        <div class="wifi-type">{{ wiFiInfo.Gby5.title }}</div>
                        <div class="wifi-text-content">
                            <div class="wifi-name">{{ $t('netWork.wifiSettings.ssidTextMobile') + ':' }}</div>
                            <div class="wifi-name-content">{{ wiFiInfo.Gby5.wifiName }}</div>
                        </div>
                        <div class="wifi-text-content" style="margin-top: 8px">
                            <div class="wifi-pwd">{{ $t('common.password') + ':' }}</div>
                            <div class="wifi-pwd-content">{{ wiFiInfo.Gby5.password }}</div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="tips-text">
                <p>{{ congratulations }}</p>
                <span>{{ Tips }}</span>
            </div>
        </div>

        <section class="btn-content">
            <el-button type="primary" @click="nextClick">{{ nextBtnText }}</el-button>
        </section>

        <section class="back-content">
            <el-link type="primary" @click="backClick" :underline="false">{{ $t('wizard.backStr') }}</el-link>
        </section>

        <confirmDialog ref="saveDialogRef" :title="$t('wizard.saveTips')" :confirmText="$t('common.saveButton')" @confirm="saveConfig" :isShowSuccessMessage="false" @countdownEnd="countdownEnd">
            <span>{{ $t('wizard.completedTips') }}</span>
        </confirmDialog>
    </div>
</template>

<script>

import { errorCode, LOCAL_KEY } from '@/constant/dict';
import { WIZARD_ROUTE, clearWizardHistory, textObj } from './wizard.data';

import PageTitle from './PageTitle.vue';
import WizardSteps from './WizardSteps.vue';
import { getWirelessDefault } from '@/api/wireless';
import { saveQuickSettings } from '@/api/system';

export default {
    name: 'Completed',
    components: {
        PageTitle,
        WizardSteps
    },
    data() {
        return {
            Tips: textObj().completedTips,
            congratulations: textObj().congratulations,
            wiFiInfo: {
                Gby2_4: { title: '2.4 GHz' },
                Gby5: { title: '5 GHz' },
                hide5G: true
            },
            nextBtnText: this.$t('common.nextButton'),
            showWiFiInfo: false,
            wiFiRawData: {}
        };
    },
    methods: {
        // 完成按钮
        async nextClick() {
            this.$refs.saveDialogRef.show();
        },

        // 保存设置
        async saveConfig() {
            // 清理路由历史
            clearWizardHistory();

            // 开启倒计时
            this.$refs.saveDialogRef.changeDialogStyle();

            // 获取本地存储的数据
            const obj = JSON.parse(localStorage.getItem(LOCAL_KEY.IS_WIZARD_BASE_SETTING));
            const noSkip = localStorage.getItem(LOCAL_KEY.IS_SKIP_WIZARD) != 'true';

            // 清除浏览器存储数据
            localStorage.removeItem(LOCAL_KEY.IS_WIZARD_BASE_SETTING);
            localStorage.removeItem(LOCAL_KEY.IS_SKIP_WIZARD);
    
            let param = {};

            // 未设置跳过时
            if (noSkip) {
                param = {
                    "ssid_24g": obj.wifiName2_4,
                    "key_24g": obj.wifiPwd2_4,
                    "ssid_5g": obj.wifiName5,
                    "key_5g": obj.wifiPwd5,
                }

                // 设置默认加密方式
                if (this.setSecurityType) {
                    param['st_24g'] = 'psk2+aes';
                    param['st_5g'] = 'psk2+aes';
                }
            }

            // 基础设置请求
            let res = await saveQuickSettings(param)
            .then(res => {
                this.$refs.saveDialogRef.init();
                this.$message.success(this.$t('common.success'));
            })
            .catch(err=>{
                this.$refs.saveDialogRef.init();
                this.$message.error(this.$t('common.error'));
            });
        },

        countdownEnd() {
            this.$router.replace('/dashboard');
        },

        // 返回上一步
        backClick() {
            this.$router.replace(WIZARD_ROUTE.BasicSettings);
            clearWizardHistory();
        },

        // 获取本地WIFI信息
        async getWiFiInfo() {
            try {
                // 获取本地存储的数据
                let obj = JSON.parse(localStorage.getItem(LOCAL_KEY.IS_WIZARD_BASE_SETTING));

                // 设置了跳过时，请求默认 WiFi 信息
                if (localStorage.getItem(LOCAL_KEY.IS_SKIP_WIZARD) == 'true') {
                    const {ssid_24g,ssid_5g,key_24g,key_5g} = await getWirelessDefault();
                    obj = {
                        wifiName2_4: ssid_24g,
                        wifiPwd2_4: key_24g,
                    };
                }

                this.wiFiInfo = {
                    Gby2_4: { title: '2.4 GHz', wifiName: obj.wifiName2_4, password: obj.wifiPwd2_4 },
                    Gby5: { title: '5 GHz', wifiName: obj.wifiName5, password: obj.wifiPwd5 },
                    hide5G: obj.to5G,
                    noPwd: obj.noPwd
                };

                if (this.wiFiInfo.noPwd) {
                    this.nextBtnText = this.$t('common.loginButton');
                }
            } catch (error) {
                this.backClick();
            }
        }
    },

    created() {
        console.log('Completed created');
        this.getWiFiInfo();
    },

    computed: {
        setSecurityType() {
            return false;
        }
    }
};
</script>

<style lang="less" scoped>
.page-3 {
    width: 100%;
    height: 100%;
    .card-img {
        height: 250px;
        text-align: center;

        img {
            width: 152px;
            object-fit: cover;
        }

        .tips-text {
            margin: 50px auto;
            max-width: 435px;
            text-align: left;
            font-weight: 400;
            padding: 5px;
            box-sizing: border-box;
            text-align: center;
        }
    }

    .wifi-layout {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .wifi-layout-conent {
            display: flex;
            align-items: center;
            background: rgba(32, 227, 0, 0.05);
            min-width: 200px;
            min-height: 150px;

            .wifi-img {
                width: 100px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 100%;
                }
            }

            .wifi-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-size: 14px;
                flex: 1;

                padding: 5px 10px;
                box-sizing: border-box;

                .wifi-card {
                    min-width: 200px;

                    .wifi-type {
                        line-height: 30px;
                        font-weight: bold;
                    }

                    .wifi-text-content {
                        display: flex;
                        align-items: center;

                        .wifi-name,
                        .wifi-pwd {
                            max-width: 125px;
                            min-width: 100px;
                            padding-right: 15px;
                            box-sizing: border-box;
                        }

                        .wifi-name-content,
                        .wifi-pwd-content {
                            font-weight: bold;
                            max-width: 180px;
                            word-wrap: break-word;
                        }
                    }
                }
            }
        }

        @media (max-width: 500px) {
            .wifi-layout-conent {
                flex-direction: column;
            }
        }

        .tips-text {
            text-align: center;
        }
    }

    .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px;

        /deep/.el-button {
            width: 450px;
        }
    }

    .back-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 15px;

        /deep/.el-link--inner {
            font-weight: bold;
            text-decoration: underline;
        }
    }
}
</style>
